<template>
    <div class="HitEggs">
       <head-view></head-view>
       <div class="top"></div>
       <div class="content">
           <div class="time">本次砸蛋剩余时间</div>
           <div class="container">
               <div class="container_warp">
                   <div class="warp_box">
                        <div class="warp" v-for="v in 10" :key="v.index">
                            <img src="../../../assets/img/ClockIn/naoz.png" alt="">
                            <p>ssss</p>
                        </div>
                   </div>
               </div>
           </div>
           <div class="count">
               可砸<span>0</span>次
           </div>
           <div class="eggs">
               <div class="eggs_box">
                   <div class="gold_egg" :class="{'ishit':isdisable}" v-for="i in list" :key="i.index" @click="hitEgg(i)">
                       <img v-if="i.bb==0" src="../../../assets/img/HitEggs/eggs.png" alt="">
                       
                       <div class="gif_box" v-else-if="i.bb==1">
                           <img class="hammer" src="../../../assets/img/HitEggs/hit_eggs.gif" alt="">
                             <img class="gif" src="../../../assets/img/HitEggs/hit_egg.gif" alt="">
                             
                       </div>
                       <div class="complete" v-else>
                           <img src="../../../assets/img/HitEggs/bad_egg.png" alt="">
                           <img class="light" src="../../../assets/img/HitEggs/light.png" alt="">
                       </div>
                       
                   </div>
               </div>
               
           </div>
       </div>
        <div class="hammerContainer">
            <div class="hammer_btn">
                免费获取锤子
            </div>
        </div>
        <div class="egg_banner">
            <img src="../../../assets/img/HitEggs/eggs_banner.png" alt="">
        </div>
        <!-- 弹出层金蛋弹出层 -->
        <div class="Pop-up_egg" v-if="getsuccess">
            <div class="Pop-up_box">
                <div class="up_success_playImg">
                    <p>恭喜您获得金币100</p>
                    <p></p>
                    <button>立即领取</button>
                </div>
                <div class="close"  @click="closeSuccess"><img src="../../../assets/img/public/close.png" alt=""></div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data(){
            return{
                getsuccess:false,
                isdisable: false,
                list:[
                    {id:1,bb:0},
                    {id:2,bb:0},
                    {id:3,bb:0},
                    // {id:4,bb:0},
                    // {id:5,bb:0},
                    // {id:6,bb:0},
                    // {id:7,bb:0},
                    // {id:8,bb:0},
                    // {id:9,bb:0},
                    // {id:4},
                    // {id:5},
                    // {id:6},
                    // {id:7},
                    // {id:8},
                    // {id:9},
                    
                ],
            }
        },
        methods:{
            closeSuccess(){
                this.getsuccess = !this.getsuccess
                this.isdisable = !this.isdisable;
              
            },
            hitEgg(e){
                this.isdisable = !this.isdisable
                this.list.forEach(i => {
                    if(e.bb==0){
                        if(i.id == e.id){
                            i.bb = 1
                            
                            setTimeout(()=>{
                                i.bb = 2
                                this.getsuccess = !this.getsuccess
                            },1500)
                        }
                    }
                });
             
            }
        },
        mounted(){
            
        }
    }
</script>

<style lang="scss" scoped>
@import '../../../assets/css/activity/HitEggs/HitEggs.scss'
</style>